<template>
  <div style="width: 400px; height: 400px; margin: auto; background-color:rgba(107,149,224,0.5); border-radius: 10px">
    <div >
          <el-form :model="form" style="margin-top: 30px;     padding-top: 30px;">
                <el-form-item label="姓名" label-width="15%">
                    <el-input v-model="form.userName" autocomplete="off" style="width: 90%"></el-input>
                </el-form-item>
                <el-form-item label="性别" label-width="15%">
                    <el-radio v-model="form.userSex" label="1">男</el-radio>
                    <el-radio v-model="form.userSex" label="2">女</el-radio>
                </el-form-item>
                <el-form-item label="用户头像" label-width="20%">
                    <el-upload action="http://localhost:8080/api/files/upload" :on-success="successUpload">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="密码" label-width="15%">
                    <el-input v-model="form.passWord" autocomplete="off" style="width: 90%"></el-input>
                </el-form-item>
                <el-form-item label="年龄" label-width="15%">
                    <el-input v-model="form.userAge" autocomplete="off" style="width: 90%"></el-input>
                </el-form-item>
                <el-form-item label="电话" label-width="15%">
                    <el-input v-model="form.phone" autocomplete="off" style="width: 90%"></el-input>
                </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" style="display: flex;flex-direction: row;justify-content: center;">
                  <el-button type="primary" @click="submit()">确 定</el-button>
                </div>
              </div>
    </div>
  
</template>
<style>

</style>
<script>
import request from "@/utils/request";

export default {
  name: "regist",
  data() {
    return {
      form: {}
    }
  },
  // 页面加载的时候，做一些事情，在created里面
  created() {
  },
  // 定义一些页面上控件出发的事件调用的方法
  methods: {
    submit(){
            request.post("/admin/add" ,this.form).then(res=>{
                if(res.code === 1){
                    this.$message ({
                        message:"操作成功",
                        type:"success"
                    });
                    
                    this.$router.push("/login");
                }else{
                    this.$message ({
                        message:res.msg,
                        type:"error"
                    });
                }
            })
  },
  successUpload(res) {
            this.form.userIcon = res.data;
        },
}
}

</script> 